<template>
  <div class="index">
    <div align="center">
      <h2 color="#409EFF" >角色管理</h2>

      <el-table
        :data="tableData"
        height="350"
        border
        style="width: 55%">
        <el-table-column
          prop="userID"
          label="权限ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="username"
          label="权限名"
          width="180">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button type="info" size="small" icon="el-icon-search">查看</el-button>
            <el-button type="primary" size="small" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>&nbsp;&nbsp;
    </div>
    <div align="center">
      <el-button type="success" size="small" @click="dialogVisible = true" icon="el-icon-circle-plus-outline" >增加权限</el-button>
    </div>
    <el-dialog
      title="请输入权限信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>角色ID</span>
      <el-input v-model="input1" placeholder="请输入权限ID"></el-input>
      <span>角色名称</span>
      <el-input v-model="input2" placeholder="请输入权限名"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        input1: '',
        input2: '',
        input3: '',
        tableData: [{
          userID: '1001',
          username: '无敌'
        }, {
          userID: '1002',
          username: '一人之下'
        }, {
          userID: '1003',
          username: '万人之上'
        }, {
          userID: '1004',
          username: '总领全局'
        }, {
          userID: '1005',
          username: '带领全队'
        }, {
          userID: '1006',
          username: '服从命令'
        }, {
          userID: '1007',
          username: '吃饱穿暖'
        }]
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

<style lang="scss" scoped>

</style>
